@charset "utf-8";

input[type="radio"] {
	display: none;
}

input {
	-webkit-appearance: none;
}


#radio2:checked~.div3 {
	background-color: #C71585;
}

.div2 {
	width: 100px;
	height: 100px;
	background-color: mediumseagreen;
	/* border-radius: 50%; */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.div3 {
	width: 200px;
	height: 200px;
	background-color: cadetblue;
	border-radius: 0 50% 0 50%;
	position: absolute;
	top: 10%;
	left: 30%;

}

.div4 {
	width: 200px;
	height: 200px;
	background-color: pink;
	border-radius: 50% 0 50% 0;
	position: absolute;
	top: 10%;
	right: 30%;
}


.div5 {
	width: 200px;
	height: 200px;
	background-color: lightgoldenrodyellow;
	border-radius: 50% 0 50% 0;
	position: absolute;
	bottom: 10%;
	left: 30%;
}

.div6 {
	width: 200px;
	height: 200px;
	background-color: skyblue;
	border-radius: 0% 50% 0 50%;
	position: absolute;
	bottom: 10%;
	right: 30%;
}

.bgc {
	width: 100%;
	height: 700px;
	background-color: plum;
}

/* 
动画2 */
#radio2:checked~.bgc {
	background-color: plum;
}
@keyframes center{
	100%{border-radius: 50%;
	 background-color:darkslategray;}
}
#radio2:checked~label>.div2{
	animation: center 1s linear forwards;
}





/* 动画3 */

#radio3:checked~.bgc {
	background-color: cadetblue;
}

@keyframes topleft{
	100%{border-radius: 50%;
	 background-color: palegreen;
	 transform: translate(-30%,-30%);}
}
#radio3:checked~label>.div3{
	animation: topleft 1s linear forwards;
}

/* 动画4 */
#radio4:checked~.bgc {
	background-color: pink;
}

@keyframes topright{
	100%{border-radius: 50%;
	 background-color: honeydew;
	 transform: translate(30%,-30%);}
}
#radio4:checked~label>.div4{
	animation: topright 1s linear forwards;
}

/* 动画5*/

#radio5:checked~.bgc {
	background-color: lightgoldenrodyellow;
}

@keyframes bottomleft{
	100%{border-radius: 50%;
	 background-color:rosybrown;
	 transform: translate(-30%,30%);}
}
#radio5:checked~label>.div5{
	animation: bottomleft 1s linear forwards;
}


/* 动画6 */

#radio6:checked~.bgc {
	background-color: skyblue;
}
@keyframes bottomright{
	100%{border-radius: 50%;
	 background-color:lightcoral;
	 transform: translate(30%,30%);}
}
#radio6:checked~label>.div6{
	animation: bottomright 1s linear forwards;
}